import Pointer from '@components/Pointer'
import { isPc, modelS } from '@views/store'
import { genTemplateArrFill0 } from '@views/utils'
import { Icon } from 'vant'
import { defineComponent } from 'vue'
import ImgS from './ImgS'

export default defineComponent(() => {
    const colors = ['#252525', '#828282', '#ABABAB', '#D2D2D2', '#552F2F', '#8A5959', '#B56464', '#CD8888', '#6F4C2A', '#A67648', '#E3B182', '#FFDEAF', '#676F43', '#8C9853', '#DDEC94', '#E7F1B0',
        '#2C3D55', '#526C91', '#83A1C8', '#D3E6FF', '#5C507E', '#9E8CCD', '#BDA5FF', '#E4DAFF', '#6A3260', '#C37BB6', '#CB98C2', '#FFD8F8']
    const Colors = () => <>
        <div class='colors'>
            {colors.map((color, idx) => <div class='item' style={{ backgroundColor: color }}
                onClick={() => modelS.HairColorIndex = idx}>
                {modelS.HairColorIndex === idx && <Icon name='success' />}
            </div>)}
        </div>
    </>

    const phoneCom = () => <>
        <div class='title'>颜色</div>
        <Colors />
        <Pointer />
        <div class='title title2'>发型</div>
        <ImgS dir={`${modelS.modelGender}/hair`} names={genTemplateArrFill0(modelS.modelGender === 'MALE' ? 1 : 6)} storeKey='HairStyleIndex' />

    </>
    const pcCom = () => <>
        <div class='title'>发型</div>
        <ImgS class='fr3' dir={`${modelS.modelGender}/hair`} names={genTemplateArrFill0(modelS.modelGender === 'MALE' ? 1 : 6)} storeKey='HairStyleIndex' />
        <div class='title title2'>颜色</div>
        <Colors />
    </>
    return isPc.value ? pcCom : phoneCom
})